.waterfall-container {
  gap: 20px; /* 设置元素之间的间距 */
  overflow-y: scroll; /* 添加垂直滚动条 */
  max-height: calc(100vh - 64px); /* 设置最大高度，超出部分将出现滚动条 */
  // overflow: scroll;
  padding: 20px; /* 可根据需要添加内边距 */
  // box-sizing: border-box;
}

.waterfall-container::-webkit-scrollbar {
  width: 10px; /* 设置滚动条宽度 */
}

.waterfall-container::-webkit-scrollbar-thumb {
  background-color: rgb(62, 62, 62); /* 设置滚动条颜色为黑色 */
  border-radius: 10px; /* 设置滚动条边角为圆角 */
  box-shadow: 0 0 10px rgba(102, 102, 102, 0.6); /* 添加滚动条阴影 */
  width: 6px; /* 设置滚动条宽度为6px */
}

.Colcard {
  width: 100%;
  column-count: 4;
}

.ColcardItem {
  width: 100%;
  break-inside: avoid; /* 避免在元素内部换行 */
  page-break-inside: avoid; /* 避免在元素内部换行（适用于打印） */
  margin-bottom: 10px; /* 为了可视化效果添加底部间距 */
}

html {
  min-width: 800px;
}

@media screen and (min-width: 401px) and (max-width: 800px) {
  .Colcard {
    width: 100%;
    column-count: 2;
  }
  html {
    font-size: 12px;
  }
}

@media screen and (min-width: 800px) and (max-width: 1200px) {
  .Colcard {
    width: 100%;
    column-count: 3;
  }
  html {
    font-size: 14px;
  }
}

@media screen and (min-width: 1920px) {
  .Colcard {
    width: 100%;
    column-count: 5;
  }
}
